<template>
  <canvas id="canvas" width="300" height="300" style="border:1px solid #efefef"></canvas>
  <div class="box">{{ 1 + 1 }} {{ a }} : {{ b }}</div>
  <div>
    <button @click="add">添加</button>
    {{ list }}
  </div>
</template>
<script>
import Car from './objects/Car.js'
import { fabric } from 'fabric'
import NewGroupText from './objects/newGroupText.js'
import testVue3Change from './objects/testVue3Change.js'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      list: []
    }
  },
  watch: {
    list: {
      handler() {
        console.log(`list修改了`)
      }
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.tv.add()
    }
  },
  mounted() {
    console.log(`helloworld`)
    const canvas = new fabric.Canvas('canvas', {
      selection: false,
      width: 300,
      height: 300
    })

    new NewGroupText({
      canvas
    })

    let tv = new testVue3Change()
    this.a = tv.a

    this.tv = tv
    this.list = tv.list

    //rect.controls = {}
    //const deleteObject = (e, transform) => {
    //const canvas = transform.target.canvas
    //canvas.remove(transform.target)
    //canvas.requestRenderAll()
    //}
    //const renderIcon = () => {}
    //rect.controls.abc = new fabric.Control({
    //x: 0.5,
    //y: -0.5,
    //offsetY: 16,
    //cursorStyle: 'pointer',
    //mouseUpHandler: deleteObject,
    //cornerSize: 24
    //})
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
